// 获取页面元素
const form = document.querySelector('form')
const areaInput = document.getElementById('area')
const priceInput = document.getElementById('price')
const ratioInput = document.getElementById('ratio')
const yearsInput = document.getElementById('years')
const resultDiv = document.getElementById('result')

// 监听表单提交事件
form.addEventListener('submit', function (event) {
  // 阻止表单默认提交行为
  event.preventDefault()

  // 获取用户输入值
  const area = parseFloat(areaInput.value) // 房屋面积
  const price = parseFloat(priceInput.value) // 房屋单价
  const ratio = parseFloat(ratioInput.value) // 按揭成数
  const years = parseInt(yearsInput.value) // 贷款年限

  // 计算房屋总价、首付款、贷款金额、月供

  let all = area * price;//总价
  let loan = all*(ratio/10);//贷款金额
  let down_payment = all-loan;//首付款
  let year = years;//贷款年限
  let moon = years*12;//贷款月数
  let payment = loan/moon;//月供

  // 显示结果
  resultDiv.innerHTML =
    `<p>房屋总价：${all}元</p>
    <p> 首付款：${down_payment}元</p>
    <p>贷款金额：${loan}元</p>
    <p>贷款年限：${year}年</p>
    <p>贷款月数：${moon}个月</p>
    <p>月供：${payment}元/月</p>`
})
